<template>
    <div class="customer-card">
        <div v-if="props.custStatus == 2" class="tip-box">流失</div>
        <div v-if="props.custStatus == 3" class="tip-box">异常</div>
        <div class="main-box">
            <div class="user-box">
                <div v-if="props.baseInfo.is_protected == 1" class="is-protect">已保护</div>
                <el-image
                    :src="props.baseInfo.cust_baseinfo && props.baseInfo.cust_baseinfo.avatar"
                    fit="cover"
                    class="photo">
                    <template #error>
                        <el-icon><icon-picture /></el-icon>
                    </template>
                </el-image>
                <div class="user-info">
                    <div>
                        <span class="user-info-name">
                            <span>{{ props.baseInfo.name }}</span>
                        </span>
                        <span v-if="props.baseInfo?.nickname || props.baseInfo?.cust_baseinfo?.nickname">
                            昵称：{{ props.baseInfo?.nickname || props.baseInfo?.cust_baseinfo?.nickname }}
                        </span>
                        <!-- <span v-if="props.baseInfo?.cust_baseinfo?.nickname">（{{ props.baseInfo?.cust_baseinfo?.nickname }}）</span> -->
                    </div>
                    <div class="user-member-info">
                        <el-tooltip
                            v-if="props.memberBaseInfo?.member_status == 1"
                            :content="props.memberBaseInfo?.level_info?.level_name">
                            <span class="user-info-level">
                                <img class="icon" src="/static/customer/register_member_icon.png" />
                                <span class="user-info-level-name">{{
                                    props.memberBaseInfo?.level_info?.level_name
                                }}</span>
                            </span>
                        </el-tooltip>
                        <span v-if="props.memberBaseInfo?.member_distribute_name" class="distribution-info">
                            {{ props.memberBaseInfo?.member_distribute_name }}
                        </span>
                    </div>
                    <div>
                        <span v-if="props.baseInfo.sex == 1" class="sex sex1">男</span>
                        <span v-else-if="props.baseInfo.sex == 2" class="sex sex2">女</span>
                        <span v-else class="sex sex3">未</span>
                        <span class="tel">{{ props.baseInfo.mobile }}</span>
                    </div>
                </div>
                <el-dropdown @command="onCommand">
                    <div class="handle">
                        <img src="@/assets/icon/more-icon1.png" class="handle-icon" />
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="1">编辑昵称</el-dropdown-item>
                            <el-dropdown-item command="2">编辑备注</el-dropdown-item>
                            <el-dropdown-item command="3">编辑标签</el-dropdown-item>
                            <el-dropdown-item command="4">重新分配</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <p v-if="props.baseInfo.remark" class="omit-text">{{ props.baseInfo.remark }}</p>
            <el-divider class="divider" />
            <div class="growth-value-box">
                <div
                    v-for="(item, index) in poinstArr"
                    :key="item.key"
                    class="growth-value-box-item"
                    :class="{
                        'max-length': poinstArr.length < 2,
                        'growth-value-box-item-left': index < poinstArr.length
                    }"
                    @click="item.click">
                    <div class="growth-name">
                        {{ item.name }}
                        <el-icon class="growth-arrow">
                            <arrow-right />
                        </el-icon>
                    </div>
                    <!-- 手动计算宽度 -->
                    <el-tooltip
                        v-if="getTextWidth(item.value, '24px sans-serif') > 266 / poinstArr.length"
                        :content="item.value">
                        <div class="growth-value" :class="poinstArr.length < 2 ? 'max-length' : ''">
                            {{ item.value }}
                        </div>
                    </el-tooltip>
                    <div v-else class="growth-value" :class="poinstArr.length < 2 ? 'max-length' : ''">
                        {{ item.value }}
                    </div>
                </div>
            </div>
            <Tags :tags="props.tagInfo" />
            <div v-if="state.contact && state.contact?.length > 0" class="contact-us">
                <div v-for="(item1, index1) in state.contact" :key="index1" class="item-box" @click="onContact(index1)">
                    <el-popover
                        v-if="index1 === 0"
                        trigger="hover"
                        :width="300"
                        :disabled="state.douyinList?.length == 0">
                        <template #reference>
                            <div class="handle">
                                <img
                                    :src="touchModeList.is_douyin ? item1.iconUrl : item1.iconUrlDisabled"
                                    class="handle-icon" />
                            </div>
                        </template>
                        <template #default>
                            <el-scrollbar class="douyin_scrollbar" :max-height="400">
                                <div v-for="(douyin, dyIndex) in state.douyinList" :key="`k${dyIndex}`" class="douyin">
                                    <div class="douyin_left">
                                        <img class="douyin_pic" :src="douyin.douyin_following?.avatar" alt="" />
                                        <div class="douyin_info">
                                            <div class="douyin_name">{{ douyin.douyin_following?.nickname }}</div>
                                            <div class="douyin_time">{{ douyin.douyin_following?.created_at }}</div>
                                        </div>
                                    </div>
                                    <div class="douyin_right">
                                        <span
                                            :class="
                                                douyin.douyin_following?.is_delete == 1 ? 'douyin_btn1' : 'douyin_btn2'
                                            ">
                                            {{ douyin.douyin_following?.is_delete == 1 ? '已关注' : ' 取消关注' }}
                                        </span>
                                    </div>
                                </div>
                            </el-scrollbar>
                        </template>
                    </el-popover>
                    <el-popover v-else trigger="hover" :disabled="item1.info?.length == 0" width="auto">
                        <template #reference>
                            <div class="handle">
                                <img
                                    :src="
                                        item1.info?.length > 0 || item1.info == 1
                                            ? item1.iconUrl
                                            : item1.iconUrlDisabled
                                    "
                                    class="handle-icon" />
                            </div>
                        </template>
                        <template #default>
                            <div v-for="(item2, index2) in item1.info" :key="`k${index2}`" class="cell-box">
                                <div class="cont-box">
                                    <span class="text1">{{ item2.name }}</span>
                                    <span class="text2">{{ item2.mobile || item2.wx_number }}</span>
                                </div>
                                <CopyText
                                    v-if="item2.mobile || item2.wx_number"
                                    type="icon"
                                    :copy-data="item2.mobile || item2.wx_number" />
                            </div>
                        </template>
                    </el-popover>
                </div>
            </div>
            <el-divider class="divider" />
            <div v-for="(item, index) in props.bodyInfo" :key="index" class="user-info-desc">
                <label v-if="item.type != 'qwPhone'" class="title">{{ item.name }}：</label>
                <span v-if="item.type != 'picture' && item.type != 'qwPhone'" class="word">
                    <p
                        v-for="n in item.val"
                        v-show="item.val instanceof Array && item.val?.length != 0"
                        :key="n"
                        class="word_item">
                        <span class="val">{{ n.item ? n.item : n }}</span>
                        <img
                            v-show="n.isQw && n.isQw == 1"
                            class="qwImg"
                            src="@/assets/icon/qiyeweixin-icon.png"
                            alt="" />
                    </p>
                    <p v-show="item.val instanceof Array && item.val?.length == 0" class="word_item">--</p>
                    <span v-show="!(item.val instanceof Array)">{{ item.val ? item.val : '--' }}</span>
                </span>
                <template v-else-if="item.type == 'picture' && item.val">
                    <el-image
                        class="avatar"
                        :src="item.val"
                        :preview-src-list="[item.val]"
                        :preview-teleported="true"
                        fit="cover">
                        <template #error>
                            <el-icon><icon-picture /></el-icon>
                        </template>
                    </el-image>
                </template>
                <span v-else class="word">图片未上传</span>
            </div>
        </div>

        <el-dialog v-model="showDialog" :title="dialogData.title" width="30%" destroy-on-close center>
            <div>
                <el-input
                    v-model="dialogData.val"
                    :type="dialogData.type == 'nickname' ? 'text' : 'textarea'"
                    :maxlength="dialogData.maxlength"
                    :placeholder="dialogData.placeholder"
                    :show-word-limit="dialogData.maxlength"
                    clearable />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showDialog = false">取消</el-button>
                    <el-button type="primary" @click="onCommit">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 批量标签弹框 -->
        <!-- <BatchLabel ref="BatchLabelRef" @save="handleSubmitTag"></BatchLabel> -->
        <ZwBatchLabel ref="BatchLabelRef" @save="handleSubmitTag"></ZwBatchLabel>
        <!-- 选择员工 -->
        <ZWDepart ref="DepartRef" @submit="getZWDepartData" />
        <!-- 发送短信 -->
        <Texting ref="TextingRef" :phone-list="props.bodyInfo" :touch-mobile="props.touchModeList" />
        <GrowthValueDetails ref="growthValueDetailsRef" />
        <PointsDetails ref="pointsDetailsRef" />
        <InteractPoints ref="InteractPointsRef" />
    </div>
</template>

<script setup lang="ts">
import Texting from './Texting';
import { getCustomerDouyinList } from '@/api/customer/manage/list';
import { defineProps, ref, reactive, watch, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

import Tags from './Tags.vue';
import CopyText from '@/components/CopyText.vue';
// import BatchLabel from '@/components/BatchLabel2.0.vue';
import ZWDepart from '@/components/ZWDepart.vue';
import GrowthValueDetails from './GrowthValueDetails.vue';
import PointsDetails from './PointsDetails.vue';
import InteractPoints from './InteractPoints.vue';

import { setUpdateCustomer, batchAddTag, batchRmTag, batchAssignStaff, editCustTag } from '@/api/customerCenter';

import { formatTel, getTextWidth, getSetionId } from '@/utils/utils';

import douyinIcon from '@/assets/icon/douyin-icon.png';
import qiyeweixinIcon from '@/assets/icon/qiyeweixin-icon.png';
import weixinIcon from '@/assets/icon/weixin-icon.png';
import telIcon from '@/assets/icon/tel-icon1.png';
import duanxinIcon from '@/assets/icon/duanxin-icon1.png';
import xinxiIcon from '@/assets/icon/xinxi-icon1.png';
import thePublicIcon from '@/assets/icon/the-public-icon.png';

import douyinIconDisabled from '@/assets/icon/douyin-icon-d.png';
import qiyeweixinIconDisabled from '@/assets/icon/qiyeweixin-icon-d.png';
import weixinIconDisabled from '@/assets/icon/weixin-icon-d.png';
import telIconDisabled from '@/assets/icon/tel-icon1-d.png';
import duanxinIconDisabled from '@/assets/icon/duanxin-icon1-d.png';
import xinxiIconDisabled from '@/assets/icon/xinxi-icon1-d.png';
import thePublicIconDisabled from '@/assets/icon/the-public-icon1.png';

import { useStore } from '@/store';

const route = useRoute();

interface Props {
    custStatus: any;
    baseInfo: any;
    tagInfo: any;
    bodyInfo: any;
    touchModeList: any;
    memberBaseInfo: any;
    interactPoints: any;
    wxExternalUserid: any;
}

const props = withDefaults(defineProps<Props>(), {
    custStatus: 1,
    baseInfo: {
        avatar: '',
        name: '',
        nickname: '',
        sex: 1,
        mobile: '',
        remark: ''
    },
    tagInfo: [], // 无数据
    bodyInfo: [],
    touchModeList: {
        dou_yin: [],
        is_douyin: 0
    },
    memberBaseInfo: {
        // member_status: '',
        // growth_val: '',
        // available_points: ''
    },
    interactPoints: '',
    wxExternalUserid: ''
});
const emit = defineEmits(['refresh']);
const store = useStore();
const showDialog = ref(false);
const BatchLabelRef = ref(null);
const DepartRef = ref<any>(); // 部门弹框类型
const growthValueDetailsRef = ref<any>(null);
const pointsDetailsRef = ref<any>(null);
const InteractPointsRef = ref<any>(null);
const state = reactive({
    contact: Array<{ iconUrl: string | undefined; iconUrlDisabled: string | undefined; info?: any }>(),
    douyinList: []
});
const dialogData: any = reactive({
    type: '',
    title: '',
    maxlength: 10,
    val: ''
});

const poinstArr = computed(() => {
    if (props.memberBaseInfo?.member_status == 1) {
        return [
            {
                name: '成长值',
                value: props.memberBaseInfo?.growth_val || 0,
                key: 'growth',
                click: () => handlerGrowth()
            },
            {
                name: '会员积分',
                value: props.memberBaseInfo?.points?.available_points || 0,
                key: 'points',
                click: () => handlerPoints()
            },
            {
                name: '互动积分',
                value: props.interactPoints || 0,
                key: 'interactivePoints',
                click: () => interactivePoints()
            }
        ];
    } else {
        return [
            {
                name: '互动积分',
                value: props.interactPoints || 0,
                key: 'interactivePoints',
                click: () => interactivePoints()
            }
        ];
    }
});

watch(
    props,
    depart => {
        state.contact = [
            {
                iconUrl: douyinIcon,
                iconUrlDisabled: douyinIconDisabled,
                info: depart.touchModeList.dou_yin
            },
            {
                iconUrl: qiyeweixinIcon,
                iconUrlDisabled: qiyeweixinIconDisabled,
                info: depart.touchModeList.qw
            },
            {
                iconUrl: weixinIcon,
                iconUrlDisabled: weixinIconDisabled,
                info: depart.touchModeList.wx
            },
            {
                iconUrl: telIcon,
                iconUrlDisabled: telIconDisabled,
                info: depart.touchModeList.phone
            },
            {
                iconUrl: duanxinIcon,
                iconUrlDisabled: duanxinIconDisabled,
                info: depart.touchModeList.email
            },
            {
                iconUrl: xinxiIcon,
                iconUrlDisabled: xinxiIconDisabled,
                info: depart.touchModeList.short_message
            },
            {
                iconUrl: thePublicIcon,
                iconUrlDisabled: thePublicIconDisabled,
                info: depart.touchModeList.is_official_account ? [{ name: '暂无数据' }] : []
            }
        ];
    },
    { deep: true }
);

// 发短信弹框
const TextingRef = ref<any>(null);
const onContact = (index: any) => {
    if (state.contact[index].info?.length && index == 5) {
        TextingRef.value.onTexting({ baseInfo: props.baseInfo, cust_id: route.query.id });
    }
};

// 打开选择标签弹框
const openBatchLabel = () => {
    BatchLabelRef.value.dialogVisible = true;
    BatchLabelRef.value.title = '编辑标签';
    BatchLabelRef.value.hasConditiion = false;
    BatchLabelRef.value.chooseDataArr = JSON.parse(JSON.stringify(props.tagInfo));
};
const handleSubmitTag = (val: any) => {
    const params = {
        cust_id: route.query.id,
        tag_list: val.idList
    };
    editCustTag(params).then((res: any) => {
        emit('refresh');
    });
};
// 批量分配员工
const batchAssignStaffFun = (work_user_list: any) => {
    batchAssignStaff({ customer_list: [props.baseInfo.id], work_user_list })
        .then((r: object) => {
            emit('refresh');
        })
        .catch((e: object) => {
            // console.log(e, 555)
        });
};
//打开 选择员工弹框
const openDepart = () => {
    DepartRef.value.departVisble = true;
    DepartRef.value.multiple = false;
    if (props.baseInfo.assign_employees.id) {
        DepartRef.value.selectedMember = [props.baseInfo.assign_employees];
    }
};
// 获取当前选中的员工的数据
const getZWDepartData = (val: any) => {
    batchAssignStaffFun(getSetionId('id', val));
};

const onCommand = (e: string | number | object) => {
    const _i = Number(e) - 1;
    if (e < 3) {
        showDialog.value = true;
        dialogData.type = ['nickname', 'remark'][_i];
        dialogData.title = ['编辑昵称', '编辑备注'][_i];
        dialogData.maxlength = [10, 100][_i];
        dialogData.placeholder = ['请输入昵称', '请输入备注'][_i];
        dialogData.val = [props.baseInfo.nickname, props.baseInfo.remark][_i];
    } else {
        // 添加标签 或者删除标签
        if (e == 3) {
            openBatchLabel();
            return;
        }
        openDepart();
        // 触发添加标签和重新分配操作
    }
};
const onCommit = (e: string | number | object) => {
    setUpdateCustomer({ customer_id: route.query.id, field: dialogData.type, content: dialogData.val }).then(
        (res: any) => {
            const baseInfo = props.baseInfo;
            showDialog.value = false;
            baseInfo[dialogData.type] = dialogData.val; // 静默更新
        }
    );
};
const getDouyinList = async () => {
    const params = {
        cust_id: route.query.id,
        page: 1,
        page_size: 1000
    };
    const res: any = await getCustomerDouyinList(params);

    state.douyinList = res.data;
};
const handlerGrowth = () => {
    growthValueDetailsRef.value.reset();
    growthValueDetailsRef.value.state.searchParams.member_no = props.memberBaseInfo.member_no;
    growthValueDetailsRef.value.appDialog.visible = true;
};
const handlerPoints = () => {
    pointsDetailsRef.value.reset();
    pointsDetailsRef.value.state.searchParams.member_no = props.memberBaseInfo.member_no;
    pointsDetailsRef.value.appDialog.visible = true;
};
const interactivePoints = () => {
    InteractPointsRef.value.reset();
    InteractPointsRef.value.state.searchParams.wx_external_userid = props.wxExternalUserid;
    InteractPointsRef.value.appDialog.visible = true;
};
onMounted(() => {
    getDouyinList();
});
</script>

<style lang="scss" scoped>
.customer-card {
    position: relative;

    .tip-box {
        height: 16px;
        background-color: #ffc69e;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        line-height: 16px;
    }

    .main-box {
        padding: 10px 20px;

        .user-box {
            display: flex;
            align-items: center;

            .is-protect {
                position: absolute;
                z-index: 99;
                top: 0;
                left: 0;
                width: 50px;
                line-height: 20px;
                text-align: center;
                font-size: 12px;
                border-radius: 3px;
                background-color: #f8bf98;
                color: #ff6b00;
            }

            .photo {
                width: 60px;
                height: 60px;

                .el-image__inner {
                    width: 60px;
                    height: 60px;
                }

                .image-slot {
                    .el-icon {
                        font-size: 36px;
                    }
                }
            }

            .user-info {
                width: 70%;
                padding-left: 20px;

                div {
                    margin: 0;

                    &:first-of-type {
                        span {
                            display: inline-block;

                            // width: 100%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;

                            &:first-of-type {
                                font-size: 20px;
                                font-weight: 500;
                                color: #33302d;
                                line-height: 21px;
                            }

                            &:last-of-type {
                                font-size: 14px;
                                font-weight: 300;
                                color: #33302d;
                                line-height: 14px;
                            }
                        }
                    }

                    &:last-of-type {
                        display: flex;
                        align-items: center;
                        margin-top: 10px;

                        .sex {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 18px;
                            height: 18px;
                            border-radius: 50%;
                            font-size: 12px;
                            color: #fff;
                        }

                        .sex1 {
                            background-color: #74ddf4;
                        }

                        .sex2 {
                            background-color: #f474bf;
                        }

                        .sex3 {
                            background-color: #d9d9d9;
                        }

                        .tel {
                            margin-left: 4px;
                            font-size: 14px;
                            font-weight: 300;
                            color: #696969;
                        }
                    }
                }

                .user-info-name {
                    padding-bottom: 4px;
                    display: flex !important;
                    align-items: center;
                }
            }

            .user-member-info {
                margin-top: 4px !important;
                display: flex;
                align-items: center;

                .user-info-level {
                    margin-left: 4px;
                    padding-right: 4px;
                    display: flex;
                    align-items: center;
                    background: linear-gradient(270deg, #ffac2b 0%, #ffd592 100%);
                    border-radius: 8px;

                    .icon {
                        width: 16px;
                        height: 17px;
                    }

                    .user-info-level-name {
                        padding: 3px 0 3px 3px;
                        color: #fff;
                        line-height: 10px;
                        font-size: 10px;
                    }
                }

                .distribution-info {
                    margin-left: 6px;
                    padding: 4px 6px;
                    display: inline-block;
                    font-size: 8px;
                    color: #ff6b00;
                    line-height: 8px;
                    background: #fff1ed;
                    border-radius: 8px;
                }
            }

            .el-dropdown {
                align-self: flex-start;

                .handle {
                    width: 12px;
                    text-align: right;
                    cursor: pointer;

                    .handle-icon {
                        width: 3px;
                        align-self: flex-end;
                    }
                }
            }
        }

        .growth-value-box {
            margin-bottom: 16px;
            padding: 24px 0;
            display: flex;
            justify-content: space-between;
            border-radius: 2px;
            border: 1px solid #eaeaea;

            .growth-value-box-item-left {
                border-right: 1px solid #eaeaea;
            }

            .growth-value-box-item {
                flex: 1;
                text-align: center;
                max-width: 90px;

                &.max-length {
                    max-width: 266px;
                }

                .growth-name {
                    color: #969696;
                    font-size: 14px;
                    line-height: 20px;
                    cursor: pointer;

                    .growth-arrow {
                        vertical-align: middle;
                    }
                }

                .growth-value {
                    padding-top: 12px;
                    color: #ff6b00;
                    font-size: 24px;
                    line-height: 24px;
                    cursor: pointer;
                    max-width: 90px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    &.max-length {
                        max-width: 266px;
                    }
                }
            }
        }

        .omit-text {
            margin: 16px 0;
            font-size: 13px;
            font-weight: 300;
            color: #969696;
            line-height: 18px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .divider {
            margin: 16px 0;
        }

        .contact-us {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 38px;
            margin-top: 16px;
            background: #fffaf9;
            border-radius: 19px;
            border: 1px solid #ffc69e;

            .item-box {
                width: 26px;
                height: 26px;
                background-color: #fff;
                border-radius: 50%;
                box-shadow: 0 2px 4px 0 rgb(209 209 209 / 50%);

                .handle {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 26px;

                    .handle-icon {
                        width: 60%;
                    }
                }
            }
        }

        .user-info-desc {
            display: flex;
            margin-bottom: 16px;

            &:last-of-type {
                margin-bottom: 0;
            }

            .avatar {
                width: 50px;
                height: 50px;
            }

            .title {
                flex: 0 0 auto;
                font-size: 14px;
                font-weight: 300;
                color: #969696;
            }

            .word {
                flex: auto;
                font-size: 14px;
                font-weight: 400;
                color: #33302d;
                word-break: break-all;

                &_item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .val {
                        line-height: 18px;
                    }

                    .qwImg {
                        width: 17px;
                        height: 15px;
                        object-fit: fill;
                    }
                }
            }
        }
    }
}

.el-popover {
    // min-width: 200px;
    .cell-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 28px;
        font-size: 14px;
        font-weight: 300;

        .cont-box {
            flex: auto;

            .text1 {
                color: #33302d;
            }

            .text2 {
                color: #ff6b00;
            }
        }
    }
}

.douyin_scrollbar {
    // max-height: 200px;
    padding-right: 10px;

    .douyin {
        padding-bottom: 16px;
        border-bottom: 1px solid #eaeaea;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: STHeitiSC-Light, STHeitiSC;

        &:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .douyin_left {
            display: flex;

            .douyin_pic {
                min-width: 36px;
                max-width: 36px;
                min-height: 36px;
                max-height: 36px;
                display: grid;
                place-content: center;
            }

            .douyin_info {
                margin-left: 10px;

                .douyin_name {
                    height: 14px;
                    margin-bottom: 10px;
                    font-size: 14px;
                    font-weight: 300;
                    color: #33302d;
                    line-height: 14px;
                }

                .douyin_time {
                    height: 12px;
                    font-size: 12px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    line-height: 12px;
                }
            }
        }

        .douyin_right {
            padding: 3px;
            border-radius: 2px;
            font-size: 12px;
            font-weight: 300;
            line-height: 12px;

            .douyin_btn1 {
                background: #fff3ea;
                color: #ff6b00;
            }

            .douyin_btn2 {
                background: #f5f5f5;
                color: #969696;
            }
        }
    }
}
</style>
